En komplett guide till Webbprestanda-API:er, som tÀcker nyckeltal som FCP, LCP och CLS för att optimera anvÀndarupplevelsen.
Webbprestanda-API:er: MÀtning av timing för överlÀgsna anvÀndarupplevelser
I dagens digitala landskap Àr en snabb och responsiv webbplats inte lÀngre en lyx; det Àr en nödvÀndighet. AnvÀndare förvÀntar sig sömlösa upplevelser, och Àven en liten fördröjning kan leda till frustration, övergivna kundvagnar och i slutÀndan förlorade intÀkter. Webbprestanda-API:er ger utvecklare verktygen för att exakt mÀta olika aspekter av en webbplats prestanda, vilket gör det möjligt för dem att identifiera flaskhalsar och optimera anvÀndarupplevelsen (UX).
FörstÄ vikten av mÀtvÀrden för anvÀndarupplevelse
Innan vi dyker in i de tekniska detaljerna för API:erna Àr det avgörande att förstÄ varför UX-mÀtvÀrden Àr sÄ viktiga. De erbjuder ett kvantifierbart sÀtt att bedöma hur anvÀndare uppfattar hastigheten och responsiviteten pÄ din webbplats. DÄlig UX kan pÄverka negativt:
- Avvisningsfrekvens: LÄngsamma laddningstider leder ofta till att anvÀndare lÀmnar din webbplats innan de interagerar med innehÄllet.
- Konverteringsgrad: En frustrerande anvÀndarupplevelse kan avskrÀcka potentiella kunder frÄn att slutföra transaktioner.
- Sökmotorranking: Sökmotorer som Google prioriterar webbplatser med god prestanda, vilket pÄverkar din synlighet i sökresultaten. Core Web Vitals, som i hög grad förlitar sig pÄ prestanda-API:er, Àr en rankingfaktor.
- VarumÀrkesuppfattning: En lÄngsam webbplats kan skapa ett negativt intryck av ditt varumÀrke, vilket antyder en brist pÄ uppmÀrksamhet pÄ detaljer och en dÄlig anvÀndarupplevelse.
Viktiga webbprestanda-API:er och mÀtvÀrden
Flera webbprestanda-API:er finns tillgÀngliga, och var och en ger unika insikter i olika aspekter av en webbplats prestanda. HÀr Àr nÄgra av de viktigaste:
1. Navigation Timing API
Navigation Timing API ger detaljerad tidsinformation relaterad till laddningen av ett dokument. Det lÄter dig mÀta tiden det tar för olika stadier i laddningsprocessen, sÄsom:
- navigationStart: TidsstÀmpeln precis innan webblÀsaren börjar hÀmta dokumentet.
- fetchStart: TidsstÀmpeln precis innan webblÀsaren börjar hÀmta dokumentet frÄn nÀtverket.
- domainLookupStart: TidsstÀmpeln precis innan webblÀsaren startar DNS-uppslagningen för dokumentets domÀn.
- domainLookupEnd: TidsstÀmpeln precis efter att webblÀsaren slutför DNS-uppslagningen.
- connectStart: TidsstÀmpeln precis innan webblÀsaren börjar upprÀtta en anslutning till servern.
- connectEnd: TidsstÀmpeln precis efter att webblÀsaren har slutfört upprÀttandet av anslutningen till servern.
- requestStart: TidsstÀmpeln precis innan webblÀsaren skickar HTTP-förfrÄgan för dokumentet.
- responseStart: TidsstÀmpeln precis efter att webblÀsaren tar emot den första byten av HTTP-svaret.
- responseEnd: TidsstÀmpeln precis efter att webblÀsaren tar emot hela HTTP-svaret.
- domLoading: TidsstÀmpeln precis innan webblÀsaren sÀtter document.readyState till "loading".
- domInteractive: TidsstÀmpeln precis efter att webblÀsaren har parsat HTML-dokumentet och DOM Àr redo.
- domContentLoadedEventStart: TidsstÀmpeln precis innan webblÀsaren avfyrar DOMContentLoaded-hÀndelsen.
- domContentLoadedEventEnd: TidsstÀmpeln precis efter att webblÀsaren avfyrar DOMContentLoaded-hÀndelsen.
- domComplete: TidsstÀmpeln precis efter att webblÀsaren sÀtter document.readyState till "complete".
- loadEventStart: TidsstÀmpeln precis innan webblÀsaren avfyrar load-hÀndelsen.
- loadEventEnd: TidsstÀmpeln precis efter att webblÀsaren avfyrar load-hÀndelsen.
Exempel: BerÀkna tiden det tar för DNS-uppslag:
const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
2. Resource Timing API
Resource Timing API ger detaljerad tidsinformation för enskilda resurser som laddas av en webbsida, sÄsom bilder, CSS-filer, JavaScript-filer och typsnitt. Detta API hjÀlper dig att identifiera vilka resurser som tar lÀngst tid att ladda och optimera deras leverans.
Nyckeltal:
- name: Resursens URL.
- startTime: TidsstÀmpeln nÀr webblÀsaren börjar hÀmta resursen.
- responseEnd: TidsstÀmpeln nÀr webblÀsaren tar emot den sista byten av resursen.
- duration: Den totala tiden det tog att ladda resursen (responseEnd - startTime).
- transferSize: Storleken pÄ resursen som överfördes över nÀtverket.
- encodedBodySize: Storleken pÄ resursen före komprimering.
- decodedBodySize: Storleken pÄ resursen efter dekomprimering.
Exempel: Identifiera den största bilden pÄ sidan:
const resourceTiming = performance.getEntriesByType("resource");
let largestImage = null;
let largestImageSize = 0;
resourceTiming.forEach(resource => {
if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
largestImage = resource.name;
largestImageSize = resource.transferSize;
}
});
console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
3. User Timing API
User Timing API lÄter dig definiera anpassade prestandamÄtt och mÀta tiden det tar för specifika kodblock eller anvÀndarinteraktioner. Detta Àr sÀrskilt anvÀndbart för att spÄra prestandan hos kritiska JavaScript-funktioner eller komplexa UI-komponenter.
Viktiga metoder:
- performance.mark(markName): Skapar en tidsstÀmpel med det angivna namnet.
- performance.measure(measureName, startMark, endMark): Skapar en prestandamÀtning mellan tvÄ markeringar.
- performance.getEntriesByType("measure"): HÀmtar alla prestandamÀtningar.
Exempel: MĂ€ta tiden det tar att rendera en komplex React-komponent:
performance.mark("componentRenderStart");
// Code to render the React component
render( , document.getElementById("root"));
performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");
const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
4. Long Tasks API
Long Tasks API hjÀlper dig att identifiera uppgifter som blockerar huvudtrÄden i mer Àn 50 millisekunder. Dessa lÄnga uppgifter kan orsaka ryckighet i grÀnssnittet (UI jank) och negativt pÄverka anvÀndarupplevelsen. Genom att identifiera och optimera dessa uppgifter kan du förbÀttra responsiviteten pÄ din webbplats.
Exempel: Logga lÄnga uppgifter till konsolen:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log("Long Task:", entry);
});
});
observer.observe({ type: "longtask", buffered: true });
5. Paint Timing API
Paint Timing API exponerar tvÄ nyckeltal relaterade till den visuella renderingen av en webbsida:
- First Paint (FP): Tiden dÄ webblÀsaren renderar den första pixeln pÄ skÀrmen.
- First Contentful Paint (FCP): Tiden dÄ webblÀsaren renderar det första innehÄllet (t.ex. bild, text) pÄ skÀrmen.
Dessa mÀtvÀrden Àr avgörande för att förstÄ hur snabbt anvÀndare uppfattar den initiala visuella Äterkopplingen frÄn din webbplats.
Exempel: HĂ€mta FCP:
const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");
if (fcpEntry) {
console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
6. Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) Àr ett Core Web Vital-mÄtt som mÀter tiden det tar för det största innehÄllselementet (t.ex. bild, video, textblock) att bli synligt inom visningsomrÄdet. En bra LCP-poÀng indikerar att sidans huvudinnehÄll laddas snabbt, vilket ger en bÀttre anvÀndarupplevelse.
Vad man ska optimera för LCP:
- Optimera bilder: AnvÀnd lÀmpliga bildformat (t.ex. WebP), komprimera bilder och anvÀnd responsiva bilder.
- Optimera CSS: Minimera och komprimera CSS-filer, och undvik render-blockerande CSS.
- Optimera JavaScript: Skjut upp icke-kritiskt JavaScript och undvik lÄngvariga JavaScript-uppgifter.
- Serverns svarstider: Se till att din server svarar snabbt pÄ förfrÄgningar.
7. Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) Àr ett annat Core Web Vital-mÄtt som mÀter den visuella stabiliteten pÄ en webbsida. Det kvantifierar mÀngden ovÀntade layoutförskjutningar som intrÀffar under laddningsprocessen. En lÄg CLS-poÀng indikerar att sidan Àr visuellt stabil, vilket ger en trevligare anvÀndarupplevelse.
Vad orsakar layoutförskjutningar:
- Bilder utan dimensioner: Ange alltid bredd- och höjdattribut för bilder.
- Annonser, inbÀddningar och iframes utan reserverat utrymme: Reservera utrymme för dessa element för att förhindra att de orsakar layoutförskjutningar.
- Dynamiskt injicerat innehÄll: Var försiktig nÀr du injicerar innehÄll dynamiskt, eftersom det kan orsaka ovÀntade layoutförskjutningar.
- Webbtypsnitt som orsakar FOIT/FOUT: Optimera laddningen av typsnitt för att minimera pÄverkan av Font-Of-Invisible-Text (FOIT) och Font-Of-Unstyled-Text (FOUT).
8. Interaction to Next Paint (INP)
Interaction to Next Paint (INP) Àr ett Core Web Vital-mÄtt som mÀter en webbsidas responsivitet vid anvÀndarinteraktioner. Det utvÀrderar latensen för alla klick, tryckningar och tangentbordsinteraktioner en anvÀndare gör under sitt besök pÄ en sida. INP ersÀtter First Input Delay (FID) som ett Core Web Vital-mÄtt i mars 2024.
FörbÀttra INP:
- Optimera JavaScript-exekvering: Dela upp lÄnga uppgifter i mindre, asynkrona delar för att undvika att blockera huvudtrÄden.
- Skjut upp icke-kritiskt JavaScript: Ladda endast nödvÀndigt JavaScript för den initiala renderingen och skjut upp resten.
- AnvÀnd Web Workers: Flytta berÀkningsintensiva uppgifter till Web Workers för att förhindra att de blockerar huvudtrÄden.
- Optimera hÀndelsehanterare: Se till att hÀndelsehanterare Àr effektiva och undvik att utföra onödiga operationer.
Praktiska exempel och kodstycken
HÀr Àr nÄgra praktiska exempel pÄ hur du kan anvÀnda webbprestanda-API:er för att mÀta och optimera webbplatsens prestanda:
Exempel 1: MĂ€ta sidladdningstid
window.addEventListener("load", () => {
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
console.log(`Page Load Time: ${loadTime} ms`);
});
Exempel 2: Identifiera lÄngsamma resurser
const resourceTiming = performance.getEntriesByType("resource");
resourceTiming.forEach(resource => {
if (resource.duration > 1000) {
console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
}
});
Exempel 3: MĂ€ta Time to Interactive (TTI) - Approximation
Obs: TTI Ă€r ett komplext mĂ€tvĂ€rde, och detta Ă€r en förenklad approximation. Ăkta TTI krĂ€ver ett mer sofistikerat tillvĂ€gagĂ„ngssĂ€tt.
function getTimeToInteractive() {
return new Promise(resolve => {
if (document.readyState === 'complete') {
resolve(performance.now());
} else {
window.addEventListener('load', () => {
resolve(performance.now());
});
}
});
}
getTimeToInteractive().then(tti => {
console.log(`Approximate Time to Interactive: ${tti} ms`);
});
Handlingsbara insikter för att optimera anvÀndarupplevelsen
NÀr du har samlat in prestandadata med hjÀlp av webbprestanda-API:er kan du anvÀnda följande handlingsbara insikter för att optimera anvÀndarupplevelsen pÄ din webbplats:
- Optimera bilder: Komprimera bilder, anvÀnd lÀmpliga bildformat (t.ex. WebP) och anvÀnd responsiva bilder för att minska bildernas laddningstider.
- Minimera och komprimera kod: Minimera och komprimera HTML-, CSS- och JavaScript-filer för att minska deras storlek och förbÀttra laddningstiderna.
- Utnyttja webblÀsarcache: Konfigurera din server för att stÀlla in lÀmpliga cache-headers för att aktivera webblÀsarcache för statiska resurser.
- AnvÀnd ett Content Delivery Network (CDN): Distribuera din webbplats innehÄll över flera servrar geografiskt för att minska latensen för anvÀndare pÄ olika platser. PopulÀra CDN-leverantörer inkluderar Cloudflare, Akamai och Amazon CloudFront.
- Optimera laddning av typsnitt: AnvÀnd font-display: swap för att förhindra typsnittsblockering och förbÀttra den upplevda laddningshastigheten pÄ din webbplats.
- Minska antalet HTTP-förfrÄgningar: Minimera antalet HTTP-förfrÄgningar genom att kombinera CSS- och JavaScript-filer, infoga kritisk CSS och anvÀnda CSS-sprites.
- Skjut upp icke-kritiska resurser: Skjut upp laddningen av icke-kritiska resurser, som bilder och JavaScript-filer, till efter den initiala sidladdningen.
- Optimera serverns svarstider: Se till att din server svarar snabbt pÄ förfrÄgningar genom att optimera din server-side-kod och databasfrÄgor.
- Ăvervaka prestanda regelbundet: Ăvervaka kontinuerligt din webbplats prestanda med hjĂ€lp av webbprestanda-API:er och andra verktyg för prestandaövervakning för att identifiera och Ă„tgĂ€rda eventuella prestandaproblem. Verktyg som Google PageSpeed Insights, WebPageTest och Lighthouse kan ge vĂ€rdefulla insikter.
Verktyg och bibliotek för prestandaövervakning
Flera verktyg och bibliotek kan hjÀlpa dig att övervaka och analysera webbplatsens prestanda med hjÀlp av webbprestanda-API:er:
- Google PageSpeed Insights: Ett gratis verktyg som analyserar din webbplats prestanda och ger rekommendationer för förbÀttringar.
- WebPageTest: Ett gratis verktyg som lÄter dig testa din webbplats prestanda frÄn olika platser och webblÀsare.
- Lighthouse: Ett open-source, automatiserat verktyg för att förbÀttra kvaliteten pÄ webbsidor. Det har granskningar för prestanda, tillgÀnglighet, progressiva webbappar, SEO och mer.
- New Relic: En omfattande plattform för prestandaövervakning som ger realtidsinsikter i webbplatsens prestanda.
- Datadog: En övervaknings- och analysplattform som ger insyn i hela din infrastruktur, inklusive webbplatsens prestanda.
- Sentry: En plattform för felspÄrning och prestandaövervakning i realtid.
- Web Vitals Chrome Extension: Ett Chrome-tillÀgg som visar Core Web Vitals-mÀtvÀrden i realtid.
Att tÀnka pÄ för en global publik
NÀr du optimerar webbplatsens prestanda för en global publik Àr det viktigt att ta hÀnsyn till följande faktorer:
- Geografisk plats: AnvÀnd ett CDN för att distribuera ditt innehÄll över flera servrar geografiskt, vilket minskar latensen för anvÀndare pÄ olika platser.
- NÀtverksförhÄllanden: Optimera din webbplats för anvÀndare med lÄngsamma eller opÄlitliga nÀtverksanslutningar genom att anvÀnda tekniker som bildkomprimering, kodminimering och webblÀsarcache.
- Enhetskapacitet: Optimera din webbplats för olika enheter, inklusive mobiltelefoner, surfplattor och datorer, genom att anvÀnda responsiv design och adaptiva laddningstekniker.
- SprÄk och lokalisering: Se till att din webbplats Àr lokaliserad för olika sprÄk och regioner, inklusive översÀttning av innehÄll och anpassning av layouter för olika textriktningar.
- TillgÀnglighet: Se till att din webbplats Àr tillgÀnglig för anvÀndare med funktionsnedsÀttningar genom att följa riktlinjer för tillgÀnglighet sÄsom WCAG.
Slutsats
Webbprestanda-API:er erbjuder ovÀrderliga verktyg för att mÀta och optimera en webbplats prestanda. Genom att förstÄ och anvÀnda dessa API:er kan utvecklare identifiera prestandaflaskhalsar, förbÀttra anvÀndarupplevelsen och i slutÀndan driva affÀrsframgÄng. Kom ihÄg att prioritera Core Web Vitals (LCP, CLS och INP) som nyckeltal för webbplatsens övergripande hÀlsa och anvÀndarnöjdhet. Genom att kontinuerligt övervaka och optimera din webbplats prestanda kan du sÀkerstÀlla en snabb, responsiv och engagerande upplevelse för anvÀndare över hela vÀrlden.